import styles from '../pages/ads/components/modal.less'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import { message, Upload, Input, Button, Card, Col, Tag } from 'antd'
import type { UploadChangeParam } from 'antd/es/upload'
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'
import React, { useState, useEffect } from 'react'
import { getBase64, beforeUpload } from '@/utils'

interface IProps {
    index: number,
    acceptItem: Function,
    acceptList: Function,
    isEdit?: boolean,
    info?: any
}

const MyCard: React.FC<IProps> = ({ index, acceptItem, acceptList, isEdit, info }) => {
    const [loading, setLoading] = useState(false)
    const [imageUrl, setImageUrl] = useState<string>()
    const [val, setValue] = useState("")

    useEffect(() => {
        // console.log(info)
        acceptItem({
            val,
            imageUrl,
            index
        })
    }, [val, imageUrl])

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, url => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const remItem = () => {
        acceptList(index)
    }


    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );

    // 添加的Input
    const addItemIpt = <div className='ml20'>
        <Input value={val} onChange={(ev) => {
            setValue(ev.target.value)
        }} />
    </div>

    const editItemIpt = <div className='ml20'>
        {/* { console.log(info)} */}
        <Input value={info? info.url: ''}/>
    </div>


    return <Col span={12} className='mb20'>
        <Card title={<Tag color="blue">广告位{index + 1}</Tag>} >
            <div className={[styles.flex].join(" ")}>
                <span className='right'>
                    图片:
                </span>
                <div className='ml20'>
                    <Upload
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        // 上传地址
                        action="/upload/ad"
                        headers={{
                            Authorization: sessionStorage.getItem('token')
                        }}
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </div>
            </div>
            <div className={[styles.flex].join(" ")}>
                <span className='right'>
                    跳转链接
                </span>
                {
                    isEdit? editItemIpt: addItemIpt
                }
                {/* <div className='ml20'>
                    <Input value={val} onChange={(ev) => {
                        setValue(ev.target.value)
                    }} />
                </div> */}
            </div>

            <div className={[styles.flex].join(" ")}>
                <Button onClick={remItem} type="primary" danger>
                    删除
                </Button>
                <div className='ml20'>
                </div>
            </div>
        </Card>
    </Col>
}


export default MyCard